<template>
    <div v-show="showIframe" class="iframe" v-clickoutside="closeIframe">
        <img style="margin-top: 95px;margin-left: 600px;" @click="changeImgPath(clickIndex)" :src="imgpath"/>
    </div>
</template>
<script>
import WOW from "wow.js";
import  clickoutside from "../../assets/directives/clickoutside.js"
export default {
    name:"P11",
    created() {
        new WOW().init();
    },
    mounted() {
        document.addEventListener("keyup", this.changePage);
    },
    data() {
        return {
          clickIndex : '1',
          showIframe: false,  
          imgpath : require('../../assets/images/pptScreen/pFirst/13-3.png')
        }
    },
    directives: { clickoutside },
    methods: {
        init(){
            this.showIframe = true;
        },
        closeIframe(e){
            this.showIframe = false;
            e.stopPropagation();
        },
        changeImgPath(index){
            if(index == '1'){
                this.imgpath = require('../../assets/images/pptScreen/pFirst/13-4.png');
                this.clickIndex = ++index;
            }else if(index == '2'){
                this.imgpath = require('../../assets/images/pptScreen/pFirst/13-5.png');
                this.clickIndex = ++index;
            }else{
                this.showIframe = false;
                this.imgpath = require('../../assets/images/pptScreen/pFirst/13-3.png')
                this.clickIndex = 1;
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.iframe {
  width: 1729px;
  height: 950px;
  z-index: 999;
  top:90px;
  left:500px;
    background: url("../../assets/images/pptScreen/pFirst/13-1.png") repeat-x;;
    position: relative;
}
</style>
